<script>
import api from '@/api'
import { mapMutations, mapState } from 'vuex'

export default {
  name: 'index',
  data() {
    return {
      selectedId: 0,
      // goodsList: [],
      prizeList: [],
      loading: false,
    }
  },
  computed: {
    ...mapState('compound', ['goodsList']),
    currentPrize() {
      return this.prizeList.find((item) => item.id === this.selectedId)
    },
    totalPrice() {
      return this.goodsList.reduce((prev, next) => {
        return prev + next.num * next.recovery_price
      }, 0)
    },
    pro() {
      let progress = this.showPro
      if (progress > 100) {
        progress = 100
      }
      return Number.parseFloat(progress)
    },
    showPro() {
      if (!this.currentPrize) {
        return 0
      }
      if (!this.goodsList.length) {
        return 0
      }
      return ((this.totalPrice / this.currentPrize.recovery_price) * 100).toFixed(2)
    },
    proText() {
      if (!this.currentPrize) {
        return '0/0'
      }
      return this.totalPrice.toFixed(2) + '/' + this.currentPrize.recovery_price
    },
    overPrice() {
      if (!this.currentPrize) {
        return 0
      }
      return (this.totalPrice - this.currentPrize.recovery_price).toFixed(2)
    },
  },
  onLoad(options) {
    /* uni.$on('add', (res) => {
      res = res.filter(
        (item) =>
          !this.goodsList.some((v) => {
            const flag = v.id === item.id
            if (flag) {
              v.num = item.num
            }
            return flag
          }),
      )
      this.goodsList = [...res, ...this.goodsList] //this.goodsList.concat(res)
    }) */
  },
  onShow() {
    this.getPrizeList()
  },
  methods: {
    ...mapMutations('compound', ['clearGoods']),
    ...mapMutations('compound', ['deleteGoods']),
    ...mapMutations('compound', ['addGoods']),
    async getPrizeList() {
      const result = await api.compounds.prize({
        page: 1,
      })
      if (result.code === 200) {
        this.prizeList = result.data.data
        if (!this.prizeList.length) {
          return
        }
        this.selectedId = this.prizeList[0].id
      }
    },
    async openCompound() {
      if (this.loading) {
        return
      }
      if (this.pro < 100) {
        this.show('未完成融合要求')
        return
      }
      this.loading = true
      try {
        const result = await api.compounds.store({
          prize_id: this.selectedId,
          params: this.goodsList.map((item) => item.id + ':' + item.num).join(','),
        })
        if (result.code === 200) {
          this.clearGoods()
          this.show('融合成功')
        }
        await this.getPrizeList()
      } finally {
        this.loading = false
      }
    },
    addCompoundGoods() {
      uni.navigateTo({
        url: '/pages/compound/goods',
      })
    },
    async autoAdd() {
      const result = await api.compounds.add({
        prize_id: this.selectedId,
      })

      if (result.code === 200) {
        // this.goodsList = result.data.data
        this.addGoods(result.data.data)
      }
    },
    changeSelectId(id) {
      this.selectedId = id
      // this.goodsList = []
      this.clearGoods()
    },
  },
}
</script>

<template>
  <div class="compound-container">
    <!-- <my-header backgroundColor="transparent"></my-header> -->
    <!-- <my-content>
      
    </my-content> -->
    <view class="compound-top">
      <!--  <view class="goods-list">
        <view
          class="goods-item"
          v-if="!(index === 2 || index === 7)"
          v-for="(item, index) in 10"
          :key="item"
          :style="{ transform: `rotateZ(${12 + index * 36}deg)` }"
        >
          <image class="goods-img" src="https://www.dingxians.cn/upload/icons/120x120.png" mode="scaleToFill" />
        </view>
      </view> -->

      <view class="current-prize">
        <view class="prize" v-if="currentPrize">
          <image class="prize-image" :src="currentPrize.goods_image" mode="aspectFit" />
          <view class="prize-name">{{ currentPrize.goods_name }}</view>
          <view class="prize-price">￥{{ currentPrize.price }}</view>
        </view>
      </view>
    </view>

    <view class="btn-compound" @click="openCompound">开启融合</view>
    <view style="color: white; text-align: center" v-if="currentPrize">{{ currentPrize.residue_num }}</view>

    <view class="compound-pro">
      <view class="pro-header">
        <text>进度条</text>
        <text>{{ showPro }}%</text>
      </view>
      <liu-progressbar :progress="pro" bgColor="#01F2FF" dsColor="#0BC2C8"></liu-progressbar>
      <view class="pro-text">{{ proText }}</view>
      <view style="color: red" v-show="showPro > 100">融合超出{{ overPrice }}，超出部分将退还到金币中</view>
    </view>
	
    <view class="compound-pre">
      <view
        class="compound-item"
        @click="changeSelectId(item.id)"
        :class="{ active: selectedId === item.id }"
        v-for="item in prizeList"
        :key="item.id"
      >
        <image class="goods-img" :src="item.goods_image" mode="scaleToFill" />
      </view>
    </view>

    <view class="compound-bottom">
      <view class="compound-header">
        <view @click="clearGoods">全部清空</view>
        <view>可融合商品</view>
        <view @click="autoAdd">自动添加</view>
      </view>
      <view class="compound-goods-list">
        <image
          @click="addCompoundGoods"
          class="compound-goods-item add"
          src="https://www.dingxians.cn/upload/images/compound/add.png"
        ></image>
        <view class="compound-goods-item" v-for="(item, index) in goodsList" :key="item.id">
          <image class="goods-img" :src="item.blind_box_prize_image" mode="scaleToFill" />
          <text class="goods-num">x{{ item.num }}</text>
          <image
            @click="deleteGoods(item.id)"
            class="goods-delete"
            src="https://www.dingxians.cn/upload/images/shop/close.png"
            mode="scaleToFill"
          />
        </view>
        <view style="flex: 0 1 33.33%"></view>
      </view>
    </view>
  </div>
</template>

<style scoped lang="scss">
.compound-container {
  display: inline-block;
  width: 100%;
  min-height: 100vh;
  padding-bottom: 30rpx;
  background: url('https://www.dingxians.cn/upload/images/compound/bg.png') 100%/100% fixed;

  .compound-top {
    margin: 0 auto 30rpx;
    width: 720rpx;
    height: 690rpx;
    background: url('https://www.dingxians.cn/upload/images/compound/compound-top.png') 100%/100% no-repeat;

    .goods-list {
      display: flex;
      height: 600rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      background-color: transparent;
      position: relative;

      .goods-item {
        height: 50%;
        width: 100rpx;
        border: 1px solid #fff;
        position: absolute;
        left: calc(50% - 50rpx);
        text-align: center;
        top: 0;
        /* transform: rotateZ(100deg); */
        /* background-color: red; */
        transform-origin: bottom center;

        .goods-img {
          width: 70rpx;
          height: 70rpx;
        }
      }
    }

    .current-prize {
      height: 600rpx;
      box-sizing: border-box;
      padding-top: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      margin-left: 14rpx;

      .prize-image {
        width: 100rpx;
        height: 100rpx;
      }

      .prize-name {
        margin-top: 10rpx;
        width: 200rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 20rpx;
        line-height: 20rpx;
      }

      .prize-price {
        line-height: 20rpx;
        font-size: 20rpx;
      }
    }
  }

  .btn-compound {
    color: white;
    font-size: 40rpx;
    font-family: 'youshe', serif;
    margin: 0 auto 0;
    width: 420rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background: url('https://www.dingxians.cn/upload/images/compound/btn-compound.png') 100%/100%;
  }

  .compound-pro {
    color: white;
    margin: 0 auto;
    width: 670rpx;

    .pro-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15rpx;
    }

    .pro-text {
      text-align: end;
    }
  }

  .compound-pre {
    width: 690rpx;
    margin: 30rpx auto;
    display: flex;
    overflow-x: scroll;
    align-content: flex-start;

    .compound-item {
      margin-right: 20rpx;
      flex-shrink: 0;
      width: 128rpx;
      height: 128rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.6;
      background: url('https://www.dingxians.cn/upload/images/compound/bg-compound-item.png') 100%/100% no-repeat;

      &.active {
        opacity: 1;
      }

      .goods-img {
        width: 80%;
        height: 80%;
      }
    }
  }

  .compound-bottom {
    margin: 0 auto;
    width: 710rpx;
    height: 478rpx;
    box-sizing: border-box;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    background: url('https://www.dingxians.cn/upload/images/compound/bg-compound-bottom.png') 100%/100% no-repeat;

    .compound-header {
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .compound-goods-list {
      margin-top: 30rpx;
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      overflow: scroll;
      justify-content: space-between;

      .compound-goods-item {
        width: 114rpx;
        height: 114rpx;
        border-radius: 10rpx;
        border: 5rpx solid #fff;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .goods-img {
          width: 80%;
          height: 80%;
        }

        .goods-num {
          position: absolute;
          right: 0;
          bottom: 0;
          color: white;
        }

        .goods-delete {
          position: absolute;
          right: 0;
          top: 0;
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
}
</style>
